<template>
  <div>
    <div class="info">
      <div class="info-list">
        <div class="info-list-box" id="infomationTitleBox">
          <ul class="info-list-ul" id="infomationTitleUl">
            <li :class="item.isHighlight ? 'info-list-li highlight' : 'info-list-li'" v-for="item,index in imgUrlList" :key="item + index" :id="'infomation' + index" @click="clickTitle(item, index)">
              <img :src="item.url" alt="">
            </li>
          </ul>
        </div>
        <i style="font-size: 30px;display: inline-block;position: relative;left: 370px;top: -50px;cursor: pointer;" class="el-icon-arrow-right" @click="imgRight()">右边按钮</i>
        <i style="font-size: 30px;display: inline-block;position: relative;top: 40px;cursor: pointer;" class="el-icon-arrow-left" @click="imgLeft()">左边按钮</i>
        <img :src="imgShow.url" style="width:200px;height:200px" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgShow: {},
      imgUrlList: [
        {
          url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
          isHighlight: true,
        },
        {
          url: "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
          isHighlight: false,
        },
        {
          url: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
          isHighlight: false,
        },
      ],
    };
  },
  computed: {
    width() {
      let domWidth =
        document.getElementById("infomationTitleBox").offsetWidth / 2;
      return domWidth;
    },
  },
  mounted() {},
  methods: {
    clickTitle(item, index) {
      console.log(item, index);
      this.imgShow = item;
      this.imgUrlList.forEach((item, index) => {
        // console.log(i);
        item.isHighlight = false;
      });
      item.isHighlight = true;
      let domId = "infomation" + index;
      let domLeft = document.getElementById(domId).offsetLeft;
      let ulDom = document.getElementById("infomationTitleUl");
      // console.log(ulDom)
      console.log(domLeft, ulDom);
      if (domLeft > this.width) {
        ulDom.style.left = this.width - domLeft + "px";
      } else {
        ulDom.style.left = 0;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.info {
  width: 100%;
  margin: 50px auto;
  .info-list {
    width: 100%;
    .info-list-box {
      width: 100%;
      position: relative;
      overflow: hidden;
      height: 40px;
      .info-list-ul {
        display: flex;
        position: absolute;
        transition: all 0.3s;
        .info-list-li {
          padding: 4px 12px;
          white-space: nowrap;
          cursor: pointer;
          img {
            width: 80px;
            height: 80px;
          }
        }
        .info-list-li:hover {
          color: #409eff;
        }
        .highlight {
          position: relative;
          background-color: #409eff;
          color: #fff;
        }
        .highlight:hover {
          color: #fff;
        }
        .highlight::after {
          content: "";
          position: absolute;
          bottom: -5px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 5px solid #409eff;
        }
      }
    }
  }
}
</style>
